<template>
  <div>
    <h1>ref获取组件实例 - 实例上的score - {{ compRef?.score }}</h1>
    <TestComp ref="compRef"/>
    <h1>组件中非响应式数据a {{ compRef?.a }}</h1>
    <button @click="handleClick">获取组件实例</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TestComp from './components/TestComp.vue';
/**
 * 获取组件实例的目的，就是想获取实例的属性或者调用组件实例的方法
 * vue2 this.$refs.form validate方法
 * 获取组件实例步骤
 *  0 导入ref
 *  1.创建 ref

    2.模板中建立关联 

    3.使用

    4.defineExpose - 定义暴露
      觉得可以拿到所有的数据和方法，并且可以随意更改随意调用 不安全
      控制用户到底能拿到哪些数据哪些方法
      我想拿到组件中a数据，那组件里就应该把a暴露出去
      如果不暴露就拿不到
 */
const compRef = ref(null)
const handleClick = () => {
  console.log(compRef.value.sfStr);
  // console.log(compRef.value.score);
  // compRef.value.addScore()
  // console.log(compRef.value.sayHi?.());
  // compRef.value.a++
  // console.log(compRef.value.a);
}

</script>

<style lang="scss" scoped>

</style>